<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="10" :order="1" class="tool-action">
                    <a-input-search placeholder="骑手姓名/手机号" v-model="params.key" @search="onSearch" style="width:400px;">
                        <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
                    </a-input-search>
                </a-col>
                <a-col :span="14" :order="2" class="tool-pagination">
                    <a-button type="primary" icon="plus" @click="onEdit(0)">新增</a-button>
                </a-col>
            </a-row>
            <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template slot="index" slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot="orderCount" slot-scope="text,record,index">
                    <strong>{{record.orderCount}}</strong>
                </template>
                <template slot="deduct" slot-scope="text,record,index">
                    <strong>{{fmMoney(record.deductTotal,2,true)}}</strong>
                </template>
                <template slot="balance" slot-scope="text,record,index">
                    <strong>{{fmMoney(record.deductBalance,2,true)}}</strong>
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a @click="onShowDetail(record)" class="ant-btn-text"><a-icon type="search" /></a>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action"></a-col>
                <a-col :span="12" :order="2" class="tool-pagination" v-if="total > params.pageSize">
                    <a-pagination  :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
        <a-modal top="2vh" title="骑手佣金详情" v-model="dialogVisible" :footer="null" width="1200px" :maskClosable="false" @cancel="handleCancel">
            <deduct-detail :rider="record" v-if="dialogVisible"></deduct-detail>
        </a-modal>
    </div>
</template>
<script>
    import {findRiderList} from "../../api/user";
    import {fmMoney} from "../../utils";
    import DeductDetail from './components/DeductDetail'
    const columns = [
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title: '骑手姓名',dataIndex: 'name',width: 150,align:'center'},
        {title: '手机号',dataIndex: 'phone',width: 150,align:'center'},
        {title: '接单数',dataIndex: 'orderCount',width: 150,align:'center',scopedSlots: { customRender: 'orderCount' }},
        {title: '佣金总额',dataIndex: 'deduct',width: 150,align:'center',scopedSlots: { customRender: 'deduct' }},
        {title: '佣金余额',dataIndex: 'balance',width: 150,align:'center',scopedSlots: { customRender: 'balance' }},
        {title: '操作',key: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}];
    export default {
        components:{DeductDetail},
        data() {
            return {
                columns,
                dataList: [],
                params:{
                    key:'',
                    current:1,
                    pageSize:10,
                    sorter:{
                        field:'',
                        order:'',
                    },
                },
                total:0,
                loading:false,
                dialogVisible:false,
                record:{}
            }
        },
        methods: {
            fmMoney,
            onSearch(){
                this.params.current = 1;
                this.getList();
            },
            onChange(current){
                this.params.current = current;
                this.getList();
            },
            handleCancel(){
                this.record = {}
                this.dialogVisible = false
            },
            //编辑
            onShowDetail(record){
                this.record = record
                this.dialogVisible = true;
            },
            async getList(){
                this.loading = true;
                let resp = await findRiderList(this.params);
                this.loading = false;
                if(!this.qUtil.validResp(resp)) return false;
                this.total = resp.data.total;
                this.dataList = resp.data.dataList;
                console.log("==dataList",this.dataList);
            }
        },
        mounted(){
            this.getList();
        }
    }
</script>
<style>

</style>
